<template>
    <view :style="{ '--color': color }">
        <view class="row a-center">
            <image :src="$imgUrls(Store.logo)" mode="aspectFill" class="logo"></image>
            <view class="flex-1 d-flex f-column height">
                <text class="ellipsis black size30 bold500">{{ Store.name }}</text>
                <text class="ellipsis size26 color_99 m-top10">{{ Store.address }}</text>
            </view>
            <view class="d-flex f-column a-center m-left20">
                <view class="Join" v-if="pageData.length > 1" @click.stop="show = true">切换</view>
                <view class="size24 color_99 m-top10" v-if="Store.distance">{{ $pop.formatDistance(Store.distance) }}</view>
            </view>
        </view>
        <u-popup :show="show" @close="show = false" mode="bottom" :round="10" closeable>
            <view class="content">
                <view class="title">选择门店</view>
                <view class="list" v-for="(item, index) in pageData" :key="index" @click="changeStore(item)">
                    <image :src="$imgUrls(item.logo)" mode="aspectFill" class="list_log"></image>
                    <view class="flex-1 d-flex f-column j-sb height">
                        <text class="ellipsis black size30 bold500">{{ item.name }}</text>
                        <text class="ellipsis size26 color_99">{{ item.address }}</text>
                        <text class="size26 color_99" v-if="item.distance">{{ $pop.formatDistance(item.distance) }}</text>
                    </view>
                    <view class="JoinBox" :class="{ active: item.shop_id == Store.shop_id }">
                        <view class="iconfont icon-xuanzhong white size28"></view>
                    </view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        props: ['pageData', 'shop_id'],
        name: 'switchStores',
        data() {
            return {
                Store: '',
                show: false
            };
        },
        mounted() {
            if (!this.pageData.length) return;
            const Store = this.pageData.find((n) => n.shop_id == this.shop_id);
            this.Store = Store;
        },
        methods: {
            changeStore(item) {
                this.Store = item;
                this.show = false;
                this.$emit('changeStore', item.shop_id);
            }
        },
        computed: {
            ...mapState(['color'])
        }
    };
</script>

<style lang="scss" scoped>
    @mixin logImg {
        width: 100rpx;
        height: 100rpx;
        border-radius: 6rpx;
        overflow: hidden;
        margin-right: 20rpx;
    }
    .logo {
        @include logImg;
        border: 1px solid #f1f1f1;
    }
    .list_log {
        @include logImg;
    }
    .Join {
        padding: 2rpx 20rpx;
        border: 1px solid var(--color);
        font-size: 26rpx;
        color: var(--color);
        border-radius: 10rpx;
        // margin-left: 20rpx;
    }
    .content {
        width: 100%;
        padding: 0 24rpx 30rpx 24rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        .title {
            width: 100%;
            height: 100rpx;
            color: #000;
            font-size: 32rpx;
            font-weight: 500;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .list {
            width: 100%;
            padding: 20rpx;
            border: 1px solid #f1f1f1;
            border-radius: 10rpx;
            display: flex;
            align-items: center;
            margin-bottom: 20rpx;
            .JoinBox {
                width: 40rpx;
                height: 40rpx;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
                border: 1px solid #999;
                margin-left: 20rpx;
            }
            .active {
                border: 1px solid var(--color);
                background-color: var(--color);
            }
        }
    }
</style>
